<template>
  <el-container class="main_con">
    <div class="header">
      <div class="icon"><i class="el-sc-shezhi1"></i></div>
      <div class="txt">上传微信小程序</div>
    </div>
    <div class="notice">
      <div class="panelCon">
        <div class="steps">
          <el-steps :active="step" finish-status="success">
            <el-step title="填写版本信息" description="填写小程序版本信息，上传代码"></el-step>
            <el-step title="扫码上传" description="公众平台账号授权绑定"></el-step>
            <el-step title="提交微信审核" :status="loadResultStep" description="跳转微信页面提交审核"></el-step>
          </el-steps>
        </div>
        <el-divider></el-divider>
        <div class="access">
          <div class="abk">
            <span v-if="step == 0">
              <div class="title">填写版本信息</div>
              <div class="desc">填写小程序版本信息，上传代码</div>
              <div class="c2">
                <el-form size="medium" label-width="100px" class="edit_form" ref="uploadForm" :model="uploadCode" :rules="uploadRules">
                  <el-form-item label="版本号" style="color:#606266;" prop="version">
                    <el-input placeholder="请输入微信小程序版本号,格式:0.0.0" v-model="uploadCode.version" style="width:360px;"></el-input>
                  </el-form-item>

                  <el-form-item label="版本描述" style="color:#606266;" prop="desc">
                    <el-input type="textarea" rows="2" placeholder="请输入微信小程序描述" v-model="uploadCode.desc" style="width:360px;"></el-input>
                  </el-form-item>
                  <el-form-item label="插件" v-if="addons.indexOf(9)>0||addons.indexOf(27)>0">
                    <el-checkbox-group v-model="plugins">
                      <el-checkbox v-has="9" label="txyzf">腾讯云智服</el-checkbox>
                      <el-checkbox v-has="27" label="live-player-plugin">小程序直播</el-checkbox>
                    </el-checkbox-group>
                    <p style="color: red;">-- 需要小程序后台第三方插件激活( 未激活不要勾选)</p>
                  </el-form-item>
                </el-form>
              </div>
              <el-divider></el-divider>
              <div class="btn"><el-button type="primary" @click="upload" style="width:200px">上传代码</el-button></div>
            </span>

            <span v-else-if="step == 1">
              <span v-if="loginQR == '' || timeout != 0">
                <div class="c0">
                  <div class="icon"><img :src="require('@/assets/images/icon_mp.png')" /></div>
                  <img
                    src=""
                    alt=""
                  />
                </div>
                <div class="btn" v-if="timeout == 15 || loginQR == ''"><el-button type="primary" @click="getQrcode">获取授权二维码</el-button></div>
                <div v-if="timeout != 15" style="text-align: center;margin-top: 10px;">
                  <span style="font-size: 20px;">请稍等,{{ timeout }}s</span>
                </div>
              </span>

              <div class="c1" v-if="loginQR != '' && timeout == 0">
                <div class="qrcode"><img :src="loginQR" /></div>
                <div class="txt">请用微信扫描上方二维码进行绑定授权</div>
                <div class="text">扫码登录加载有延迟，请耐心等待</div>
              </div>
              <!--     <div class="" v-else>
                <span>{{ timeout }}s</span>
              </div> -->
            </span>

            <span v-else-if="step == 2 || step == 3">
              <div class="c3">
                <el-progress :stroke-width="15" :width="300" type="circle" :percentage="loadProgress" :status="loadResult"></el-progress>
                <div class="txt">{{ loadResultTxt }}</div>
              </div>
            </span>

            <!-- <div class="c3">
              <el-progress stroke-width="15" width="300" type="circle" :percentage="100" status="success"></el-progress>
              <div class="txt">代码上传成功</div>
            </div> -->

            <!-- <div class="c3">
              <el-progress stroke-width="15" width="300" type="circle" :percentage="100" status="exception"></el-progress>
              <div class="txt">上传失败,请确保数据是否正常</div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </el-container>
</template>

<script>
import {getSiteConfig} from '@/api/mall/setting';
import {getLoginQrcode, getIfScanSuccess, uploadMpCode, wxislogin} from '@/api/mall/multiple';
import {mapGetters} from 'vuex';

export default {
  data() {
    //校验版本号
    let validateVersion = (rule, value, callback) => {
      if (!/^[0-9]\d?(\.(0|[1-9]\d?)){2}$/.test(value)) {
        callback(new Error('版本号有误，请重填'));
      } else {
        callback();
      }
    };

    return {
      plugins: [],
      timeout: 15,
      isLoading: false,
      showPreview: false,
      previewImage: '',
      step: 0,
      loadProgress: 0,
      loadResultStep: '', //取值->error
      loadResult: null, //取值->success/exception
      loadResultTxt: '上传代码中,请稍候...',
      loginQR: '',
      timer: null,
      timer1: null,
      timer2: null,
      timer3: null,
      uploadCode: {
        version: '',
        desc: ''
      },
      uploadRules: {
        version: [
          {
            required: true,
            validator: validateVersion
          }
        ],
        desc: [
          {
            required: true,
            message: '小程序描述必须填写'
          }
        ]
      }
    };
  },
  destroyed() {
    clearTimeout(this.timer);
    clearTimeout(this.timer2);
    clearInterval(this.timer3);
  },
  computed: {
     ...mapGetters(['addons'])
  },
  created() {},
  mounted() {
    //this.step = 2;
    this.getSiteConfig('wxa');
  },
  methods: {
    //获取站点配置信息
    getSiteConfig(tp) {
      this.isLoading = true;
      getSiteConfig(tp)
        .then(res => {
          this.isLoading = false;
          //微信小程序配置
          if (!res.msg) {
            //未设置小程序appid以及密钥
            this.$router.push({
              path: '/multiple/mpKey',
              query: {
                isR: true
              }
            });
          }
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    //获取登陆二维码
    getQrcode() {
      this.isLoading = true;
      if (this.timeout != 15) {
        return;
      }
      this.gettimeout();
      getLoginQrcode({n_load: 1})
        .then(res => {
          this.isLoading = false;

          //赋值登录二维码
          this.loginQR = res.qrcode;

          //轮询扫码登陆状态
          // this.timer = setInterval(() => {
          //   this.getStatus();
          // }, 3000);
          // setTimeout(() => {
          //   this.getStatus();
          // }, 1000);
        })
        .catch(e => {
          // clearTimeout(this.timer1);
          // this.timeout=10
          // clearTimeout(this.timer);
          this.isLoading = false;
        });
    },
    //轮询扫码登陆状态
    wxislogin() {
      console.log(1111);
      wxislogin({n_load: 1}).then(res => {
        console.log(res);
        if (res.login) {
          this.getStatus();
          this.step = 2;
        } else {
          this.timer2 = setTimeout(() => {
            this.wxislogin();
          }, 1000);
        }
      });
    },
    gettimeout() {
      if (this.timeout > 0) {
        this.timeout = this.timeout - 1;
        this.timer1 = setTimeout(() => {
          this.gettimeout();
        }, 1000);
      } else {
        if (this.loginQR) {
          this.wxislogin();
        } else {
          clearTimeout(this.timer1);
          this.timeout = 15;
        }
      }
    },
    //开启定时器
    getStatus() {
      let data = {
        n_load: 1,
        plugins: this.plugins.join(',')
      };
      //虚拟上传进度
      this.loadProgress = 0;
      this.loadResult = null;
      this.loadResultTxt = '上传代码中,请稍候...';
      this.timer3 = setInterval(() => {
        if (this.loadProgress < 100) {
          this.loadProgress++;
        } else {
          clearInterval(this.timer3);
        }
      }, 1000);
      getIfScanSuccess(data)
        .then(res => {
          if (res.qrcode) {
            //保存预览二维码
            this.previewImage = res.qrcode;
            this.uploadFun();
            //清除定时器
            // clearInterval(this.timer);
            //配置步骤+1
            //this.step++;
          } else {
            this.timer = setTimeout(() => {
              this.getStatus();
            }, 2000);
          }
        })
        .catch(e => {
          console.log(e);
          // setTimeout(() => {
          //   this.getStatus();
          // },2000);
        });
    },
    //填写版本号,描述
    upload() {
      this.$refs.uploadForm.validate(valid => {
        if (valid) {
          this.step = 1;
        } else {
          //console.log('error')
          return false;
        }
      });
    },
    //上传实际函数
    uploadFun() {
      let data = this.uploadCode;
      data.n_load = 1;
      uploadMpCode(data)
        .then(res => {
          this.loadProgress = 100;
          clearInterval(this.timer3);
          if (res == '上传成功') {
            this.step = 3;
            this.loadResult = 'success';
            this.loadResultTxt = '代码上传成功';

            //弹出预览二维码
            setTimeout(() => {
              let s = `
            上传代码成功,请到微信开发平台小程序后台提交审核。<br/>微信开发平台小程序后台<a href="https://mp.weixin.qq.com" target="_blank">https://mp.weixin.qq.com</a><br/><br/>
            <img style="width:260px;height:260px;" src="${this.previewImage}">
            `;
              this.$msgbox({
                title: '预览小程序',
                dangerouslyUseHTMLString: true,
                message: s,
                center: true,
                showConfirmButton: false
              });
            }, 1500);
          } else {
            //上传失败
            this.step = 2;
            this.loadResult = 'exception';
            this.loadResultTxt = '代码上传失败,请确保数据是否正常';
          }
        })
        .catch(e => {
          this.step = 2;
          this.loadProgress = 100;
          clearInterval(x);
          this.loadResultStep = 'error';
          this.loadResultTxt = '代码上传失败,请确保数据是否正常';
        });
    }
  }
};
</script>

<style lang="scss" scoped>
//覆盖样式
::v-deep .el-step__title {
  font-size: 14px;
}

.header {
  background: #dcdfe6;
  height: 70px;
  line-height: 70px;
  padding-left: 20px;
  display: flex;

  .icon {
    color: #2d8cf0;

    i {
      vertical-align: middle;
      font-size: 24px;
    }
  }

  .txt {
    margin-left: 10px;
    font-weight: bold;
    font-size: 24px;
    color: #2d8cf0;
  }
}

.notice {
  margin-top: 20px;
  padding-top: 10px;
  background: #fff;
}

.panelCon {
  width: 100%;
  padding: 5px 20px 20px;

  .tips {
    padding: 15px;
    color: #606266;
    font-size: 14px;
    line-height: 28px;
    border: 1px solid #abdcff;
    background-color: #f0faff;
  }

  > .title {
    background: #e0e3e8;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    margin-top: 20px;
  }

  .edit_con {
    .edit_content {
      .edit_form {
        width: 100%;

        .templateDemo {
          width: 100%;
          padding: 20px;
          background: #f4f6f8;

          .pic_area {
            width: 250px;
            min-height: 410px;
            background-size: 250px 410px;
            background-position: top left;
            position: relative;
            padding: 70px 10px 0;

            .wxd {
              position: absolute;
              left: -30px;
              top: 50px;
              // position: relative;
              width: 310px;
              padding: 18px 16px;
              background-color: #fff;
              font-size: 15px;
              color: #212121;
              border: 1px solid #e5e5e5;
              border-radius: 5px;
              -webkit-transform: scale(0.7);
              transform: scale(0.7);

              .template-title {
                margin-bottom: 20px;
                line-height: 20px;
                font-size: 14px;
                color: #969696;
              }

              .template-html {
                line-height: 20px;
                font-size: 14px;
                width: 100%;
                word-break: break-all;

                .flex {
                  width: 100%;
                  display: flex;
                  height: 20px;
                  margin-bottom: 10px;

                  .label {
                    flex-shrink: 0;
                    width: 80px;
                    color: #969696;
                  }

                  .txt {
                    height: 20px;
                    flex-grow: 1;
                    line-height: 20px;
                    margin-bottom: 27px;
                  }
                }
              }
            }

            .mpd {
              position: absolute;
              left: -51px;
              top: 14px;
              padding-right: 6px;
              width: 351px;
              background-color: #fff;
              border: 1px solid #e5e5e5;
              border-radius: 5px;
              overflow: hidden;
              -webkit-transform: scale(0.66);
              transform: scale(0.66);

              .title.flex {
                display: flex;
                padding: 0 20px 0 18px;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                height: 54px;
                background-color: #fff;
                border-bottom: 1px solid #e5e5e5;

                .logo {
                  display: flex;
                  -webkit-box-align: center;
                  -ms-flex-align: center;
                  align-items: center;
                  font-weight: 700;
                  font-size: 13px;
                  line-height: 18px;
                  color: #1a1a1a;

                  .logo-icon {
                    margin-right: 4px;
                    width: 27px;
                    height: 27px;
                    line-height: 25px;
                    border: 1px solid #e7e7e7;
                    font-size: 9px;
                    color: #367bf5;
                    text-align: center;
                    border-radius: 50%;
                    font-weight: 500;
                    -webkit-transform: scale(0.8);
                    transform: scale(0.8);
                  }
                }

                .dot {
                  height: 27px;
                  line-height: 27px;

                  span {
                    display: inline-block;
                    margin-left: 3px;
                    width: 5px;
                    height: 5px;
                    background-color: #c7c7cb;
                    border-radius: 50%;
                  }
                }
              }

              .content {
                padding-left: 18px;

                .template-title {
                  margin: 16px 0 34px;
                  line-height: 24px;
                  font-size: 17px;
                }

                .template-html {
                  line-height: 20px;
                  font-size: 14px;
                  word-break: break-all;

                  .flex {
                    display: flex;
                    height: 20px;
                    margin-bottom: 10px;
                  }

                  .label {
                    width: 83px;
                    color: #969696;
                  }

                  div:last-child {
                    margin-bottom: 27px;
                  }
                }
              }

              .template-link {
                padding-left: 18px;
                height: 44px;
                line-height: 44px;
                font-size: 16px;
                cursor: default;
                border-top: 1px solid #e5e5e5;
              }
            }

            .smsd {
              min-height: 300px;
              background: #fff;

              .sms-notice {
                position: absolute;
                left: -22px;
                top: 86px;
                padding: 5px 12px;
                width: 274px;
                font-size: 15px;
                background-color: #e9e9eb;
                border-radius: 16px;
                -webkit-transform: scale(0.66);
                transform: scale(0.66);

                .sms-icon-img {
                  position: absolute;
                  left: -15px;
                  bottom: 2px;
                  width: 34px;
                  height: 41px;
                }

                .message-content {
                  position: relative;
                  line-height: 22px;
                }
              }
            }
          }
        }
      }
    }
  }

  //上传代码操作步骤
  .steps {
    height: 100px;
    padding: 20px 100px 10px;
    font-size: 14px;
  }

  .access {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 364px);

    .abk {
      //width: 260px;
      font-size: 14px;

      .title {
        font-size: 18px;
        text-align: center;
        font-weight: 700;
      }

      .desc {
        text-align: center;
        margin: 10px 0;
      }

      .c0 {
        margin-top: 20px;
        width: 260px;
        height: 260px;
        position: relative;

        .icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);

          img {
            width: 100px;
            height: 100px;
          }
        }
      }

      .c1 {
        .qrcode {
          img {
            width: 260px;
            height: 260px;
          }
        }

        .txt {
          text-align: center;
        }
      }

      .c2 {
        margin-top: 20px;
      }

      .c3 {
        width: 360px;
        margin-top: 20px;
        text-align: center;

        .txt {
          margin-top: 30px;
          font-size: 16px;
        }
      }

      .btn {
        text-align: center;
        margin-top: 20px;
      }
    }
  }
}
</style>
